<template>
    <div class="addPage">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="名称" prop="id">
                <el-cascader v-model="ruleForm.id" :options="options" @change="handleChange" :show-all-levels="false"
                    :props="propsData" :disabled="!props.isAdd" />
            </el-form-item>
            <el-form-item label="推荐指数" prop="recommendationRate">
                <el-input v-model.number="ruleForm.recommendationRate" type="number" oninput="if(value<0){
                value=0}else if(value>5){
                value=5}" placeholder="请输入" />
                <!-- <el-input-number v-model="ruleForm.recommendationRate" :min="0" :max="5" @change="handleChange" /> -->
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { getchooseProducts, commodityRecommendationAdd, commodityRecommendationUpdate } from '@/api/goods.js'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { ElInput } from 'element-plus'


const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    id: '',
    recommendationRate: '',
    sort: ''

})
const options = ref([])
const propsData = { label: 'name', children: 'children', value: 'id' }
const rules = reactive(
    {
        id: [
            { required: true, message: '请选择', trigger: 'change' },
        ],
        recommendationRate: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        sort: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
    })

onMounted(() => {
    getchooseProductsData()
    if (!props.isAdd) {
        ruleForm.id = props.row.id;
        ruleForm.recommendationRate = props.row.recommendationRate;
        ruleForm.sort = props.row.sort;
    }
})
const handleChange = (value) => {
    ruleForm.id = value[value.length - 1]
}

const getchooseProductsData = async () => {
    let res = await getchooseProducts()
    if (res.code == 200) {
        options.value = res.data
    }

}

// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                commodityRecommendationAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                commodityRecommendationUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>
.formDivTag {
    ::v-deep .is-closable {
        margin-right: 10px;
    }
}

::v-deep .el-input {
    width: 200px !important;
}

.addPage {
    width: 100%;
    overflow-y: auto;
}
</style>